<template>
    <el-popconfirm title="您确认删除全部吗？" @confirm="delAll" v-if="crud.charAt(3) === '1'">
        <template #reference>
            <el-button type="danger">Danger</el-button>
        </template>
    </el-popconfirm>

    <el-table :data="bannerDataList" style="width: 100%">
        <el-table-column prop="bannerid" label="图片编号" />
        <el-table-column prop="alt" label="图片提示" />
        <el-table-column prop="img" label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img" :alt="scope.row.alt">
            </template>
        </el-table-column>
        <el-table-column label="删除" v-if="crud.charAt(3) === '1'">
            <template #default="scope">
                <el-popconfirm title="您确认删除吗？" @confirm="delOneData(scope.row.bannerid)">
                    <template #reference>
                        <el-button type="danger" :icon="Delete" circle />
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import service from "../../../utils/service";
import type { AxiosResponse } from "axios"
import { Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from "vue-router"
// 增删查改权限获取
const $route = useRoute()
const crud: string = $route.meta.crud as string
interface IData {
    link: string,
    img: string,
    alt: string,
    bannerid: string,
    flag: boolean
}
const bannerDataList = ref<IData[]>([])
const requestData = () => {
    service({
        url: `/banner/list`,

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            bannerDataList.value = res.data.data
        }
    })
}
const delAll = () => {
    service({
        url: `/banner/removeAll`,

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            console.log("delAll success");
            requestData()
            ElMessage({
                showClose: true,
                message: '删除数据成功！！！',
                type: 'success',
            })
        }
    })
}

requestData()
const delOneData = (bannerid: string) => {

    service({
        url: `/banner/delete`,

        params: {
            bannerid: bannerid
        }
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            console.log("del success");
            requestData()
            ElMessage({
                showClose: true,
                message: "删除数据成功",
                type: "success"
            })
        }
    })


}
</script>

<style scoped>
.img {
    width: 200px;
    height: 150px;
}

.el-button--danger {
    display: block;
    margin: 0 auto 10px;
}

.delAll {
    display: block;

    margin: 0 auto 10px;
}
</style>